<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名" @keyup.enter.native="sureQuery"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.phone" placeholder="号码" @keyup.enter.native="sureQuery"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-form-item label="">
                        <el-col :span="11">
                            <el-date-picker
                                    @keyup.enter.native="sureQuery"
                                    type="date"
                                    placeholder="选择开始日期"
                                    v-model="filters.date1"
                                    style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" style="text-align: center" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-date-picker
                                    @keyup.enter.native="sureQuery"
                                    type="date"
                                    placeholder="选择结束时间"
                                    v-model="filters.date2"
                                    style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="sureQuery" @keyup.enter.native="sureQuery">查询</el-button>
                    <el-button type="primary" @click="getData">刷新</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <!--<el-table :data="userData" highlight-current-row v-loading="listLoading" @selection-change="selsChange"-->
        <!--style="width: 100%;margin-top: 20px;">-->

        <el-table :data="userData.slice((paging.page - 1) * paging.pageSize, paging.page * paging.pageSize)"
                  highlight-current-row v-loading="listLoading" @select-all="handleSelectionChange"
                  @select="selEvnt"
                  ref="multipleTable"
                  style="width: 100%;margin-top: 20px;">

            <el-table-column type="selection" width="55" prop="id">
            </el-table-column>
            <el-table-column prop="id" width="60" label="ID">
            </el-table-column>
            <el-table-column prop="uname" width="120" sortable label="姓名">
            </el-table-column>
            <el-table-column prop="phone" label="手机" width="150" sortable>
            </el-table-column>
            <el-table-column prop="district" label="内容" width="100" sortable>
            </el-table-column>
            <el-table-column prop="url" label="来源" width="150" sortable>
            </el-table-column>
            <el-table-column prop="status" label="已读" min-width="180" sortable>
                <template slot-scope="scope">
                    <p>{{ scope.row.status?"已读":"未读" }}</p>
                </template>
            </el-table-column>
            <el-table-column label="时间" min-width="180" sortable>
                <template slot-scope="scope">
                    <p>{{ scope.row.createTime | dateformat("YYYY-MM-DD HH:mm:ss")}}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="delBtnDisabled">批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="paging.page"
                           :page-size="paging.pageSize"
                           :total="paging.total"
                           style="float:right;"
            >
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <!--<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">-->
        <!--<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">-->
        <!--<el-form-item label="姓名" prop="name">-->
        <!--<el-input v-model="editForm.name" auto-complete="off"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="性别">-->
        <!--<el-radio-group v-model="editForm.sex">-->
        <!--<el-radio class="radio" :label="1">男</el-radio>-->
        <!--<el-radio class="radio" :label="0">女</el-radio>-->
        <!--</el-radio-group>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="年龄">-->
        <!--<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="生日">-->
        <!--<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="地址">-->
        <!--<el-input type="textarea" v-model="editForm.addr"></el-input>-->
        <!--</el-form-item>-->
        <!--</el-form>-->
        <!--<div slot="footer" class="dialog-footer">-->
        <!--<el-button @click.native="editFormVisible = false">取消</el-button>-->
        <!--<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>-->
        <!--</div>-->
        <!--</el-dialog>-->

        <!--新增界面-->
        <!--<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">-->
        <!--<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">-->
        <!--<el-form-item label="姓名" prop="name">-->
        <!--<el-input v-model="addForm.name" auto-complete="off"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="性别">-->
        <!--<el-radio-group v-model="addForm.sex">-->
        <!--<el-radio class="radio" :label="1">男</el-radio>-->
        <!--<el-radio class="radio" :label="0">女</el-radio>-->
        <!--</el-radio-group>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="年龄">-->
        <!--<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="生日">-->
        <!--<el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="地址">-->
        <!--<el-input type="textarea" v-model="addForm.addr"></el-input>-->
        <!--</el-form-item>-->
        <!--</el-form>-->
        <!--<div slot="footer" class="dialog-footer">-->
        <!--<el-button @click.native="addFormVisible = false">取消</el-button>-->
        <!--<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>-->
        <!--</div>-->
        <!--</el-dialog>-->
    </section>
</template>

<script>
    // import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    // import {getUserListPage, removeUser, batchRemoveUser, editUser, addUser} from '../../api/api';

    import moment from "moment"

    export default {
        data() {
            return {
                filters: {
                    name: "",
                    phone: "",
                    date1: "",
                    date2: "",
                },

                // 获取的数据
                userData: [],

                // // 分页设置
                paging: {
                    // 当前页数
                    page: 1,
                    // 每页条数
                    pageSize: 13,
                    // 总页数
                    total: 1,
                },

                // 多选后的数据存储
                multipleSelection: [],

                // 删除按钮是否可点
                delBtnDisabled: false,


                users: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列

                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ]
                },
                //编辑界面数据
                editForm: {
                    id: 0,
                    name: '',
                    sex: -1,
                    age: 0,
                    birth: '',
                    addr: ''
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ]
                },
                //新增界面数据
                addForm: {
                    name: '',
                    sex: -1,
                    age: 0,
                    birth: '',
                    addr: ''
                }

            }
        },
        methods: {
            // 页面加载渲染数据
            getData() {
                this.axios.get("/Administrator/all.do")
                    .then(res => {
                        // console.log(res.data)
                        this.userData = res.data;
                        // console.log(this.userData.length);
                        this.paging.total = this.userData.length;
                        // console.log(this.paging)
                    })
                    .catch(err => {
                        this.$message({
                            type: "error",
                            message: err + ",请刷新重试"
                        })
                    })

            },


            //性别显示转换
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },

            // 页码改变
            handleSizeChange() {

            },
            //
            handleCurrentChange(val) {
                this.paging.page = val;
                // console.log(this.paging.page)
                // console.log(this.paging)
                this.getData()
            },

            // 全选事件
            handleSelectionChange(val) {
                // console.log(val)
                // console.log(this.multipleSelection)
                val.forEach(item => {
                    if (this.multipleSelection.indexOf(item.id) === -1) {
                        this.multipleSelection.push(item.id)
                    }
                });
                if (val.length === 0) {
                    this.multipleSelection = []
                }
                // console.log(this.multipleSelection.length);
                // this.delBtnDisabled = this.multipleSelection.length !== 0
                // console.log(this.delBtnDisabled)
            },

            // 选单个选项时的事件
            selEvnt(selection, row) {
                // console.log(selection)
                // console.log(row)
                this.multipleSelection = [];
                selection.forEach(item => {
                    // console.log(item.id)
                    this.multipleSelection.push(item.id)
                });
                // this.delBtnDisabled = this.multipleSelection.length !== 0
                // console.log(this.multipleSelection)

            },


            //批量删除
            batchRemove: function () {
                // 如果选择了
                if (this.multipleSelection.length > 0) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            this.axios.get("/Administrator/delete.do?ids=" + this.multipleSelection)
                                .then(res => {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    this.getData()
                                })
                        })
                        .catch((res) => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });
                }
                //如果没有选择项
                else {
                    this.$message({
                        message: '请选择要删除的项',
                        type: 'warning'
                    });
                }


                // this.axios.get("/Administrator/delete.do?ids=" + this.multipleSelection)
                //     .then(res => {
                //         console.log(res)
                //
                //         this.getData()
                //     })


                // var ids = this.sels.map(item => item.id).toString();
                // this.$confirm('确认删除选中记录吗？', '提示', {
                //     type: 'warning'
                // }).then(() => {
                //     this.listLoading = true;
                //     //NProgress.start();
                //     let para = {ids: ids};
                //     batchRemoveUser(para).then((res) => {
                //         this.listLoading = false;
                //         //NProgress.done();
                //         this.$message({
                //             message: '删除成功',
                //             type: 'success'
                //         });
                //         // this.getUsers();
                //     });
                // }).catch(() => {
                //
                // });
            },

            // 删除单个
            handleDel: function (index, row) {
                console.log(row.id)
                this.axios.get("/Administrator/deleteById.do?id=" + row.id)
                    .then(res => {
                        this.getData()
                    })
            },


            // 关键词搜索
            sureQuery() {
                // console.log(this.filters)

                this.filters.date1 = moment(this.filters.date1).format("YYYY-MM-DD");
                this.filters.date2 = moment(this.filters.date2).format("YYYY-MM-DD");

                console.log(this.filters.name)
                console.log(this.filters.phone)

                if (this.filters.date1 === "Invalid date") {
                    this.filters.date1 = ""
                }
                if (this.filters.date2 === "Invalid date") {
                    this.filters.date2 = ""
                }
                console.log(this.filters.date1);
                console.log(this.filters.date2)

                this.axios.get("/Administrator/precis.do?name=" + this.filters.name + "&tell=" + this.filters.phone + "&beginTime=" + this.filters.date1 + "&endTime=" + this.filters.date2)
                    .then(res => {
                        console.log(res)
                        this.userData = res.data
                        // this.getData()
                    })
            },
            getTime() {

            },

            //获取用户列表
            // getUsers() {
            //     let para = {
            //         page: this.page,
            //         name: this.filters.name
            //     };
            //     this.listLoading = true;
            //     //NProgress.start();
            //     getUserListPage(para).then((res) => {
            //         this.total = res.data.total;
            //         this.users = res.data.users;
            //         this.listLoading = false;
            //         //NProgress.done();
            //     });
            // },
            //删除
            // handleDel: function (index, row) {
            //     this.$confirm('确认删除该记录吗?', '提示', {
            //         type: 'warning'
            //     }).then(() => {
            //         this.listLoading = true;
            //         //NProgress.start();
            //         let para = {id: row.id};
            //         removeUser(para).then((res) => {
            //             this.listLoading = false;
            //             //NProgress.done();
            //             this.$message({
            //                 message: '删除成功',
            //                 type: 'success'
            //             });
            //             this.getUsers();
            //         });
            //     }).catch(() => {
            //
            //     });
            // },
            //显示编辑界面
            // handleEdit: function (index, row) {
            //     this.editFormVisible = true;
            //     this.editForm = Object.assign({}, row);
            // },
            //显示新增界面
            // handleAdd: function () {
            //     this.addFormVisible = true;
            //     this.addForm = {
            //         name: '',
            //         sex: -1,
            //         age: 0,
            //         birth: '',
            //         addr: ''
            //     };
            // },
            //编辑
            // editSubmit: function () {
            //     this.$refs.editForm.validate((valid) => {
            //         if (valid) {
            //             this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //                 this.editLoading = true;
            //                 //NProgress.start();
            //                 let para = Object.assign({}, this.editForm);
            //                 para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
            //                 editUser(para).then((res) => {
            //                     this.editLoading = false;
            //                     //NProgress.done();
            //                     this.$message({
            //                         message: '提交成功',
            //                         type: 'success'
            //                     });
            //                     this.$refs['editForm'].resetFields();
            //                     this.editFormVisible = false;
            //                     this.getUsers();
            //                 });
            //             });
            //         }
            //     });
            // },
            //新增
            // addSubmit: function () {
            //     this.$refs.addForm.validate((valid) => {
            //         if (valid) {
            //             this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //                 this.addLoading = true;
            //                 //NProgress.start();
            //                 let para = Object.assign({}, this.addForm);
            //                 para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
            //                 addUser(para).then((res) => {
            //                     this.addLoading = false;
            //                     //NProgress.done();
            //                     this.$message({
            //                         message: '提交成功',
            //                         type: 'success'
            //                     });
            //                     this.$refs['addForm'].resetFields();
            //                     this.addFormVisible = false;
            //                     this.getUsers();
            //                 });
            //             });
            //         }
            //     });
            // },
            // selsChange: function (sels) {
            //     this.sels = sels;
            // },
            // //批量删除
            // batchRemove: function () {
            //
            //
            //     console.log(this.multipleSelection)
            //
            //
            //
            //
            //     // var ids = this.sels.map(item => item.id).toString();
            //     // this.$confirm('确认删除选中记录吗？', '提示', {
            //     //     type: 'warning'
            //     // }).then(() => {
            //     //     this.listLoading = true;
            //     //     //NProgress.start();
            //     //     let para = {ids: ids};
            //     //     batchRemoveUser(para).then((res) => {
            //     //         this.listLoading = false;
            //     //         //NProgress.done();
            //     //         this.$message({
            //     //             message: '删除成功',
            //     //             type: 'success'
            //     //         });
            //     //         // this.getUsers();
            //     //     });
            //     // }).catch(() => {
            //     //
            //     // });
            // },
        }
        ,
        mounted() {
            // this.getUsers();
        }
        ,
        created() {
            this.getData()
        }
    }

</script>

<style scoped>

</style>
